<div id="index">
    <!--banner开始-->
    <div class="container-fluid">
        <div class="banner">
            <div class="col-xs-3 col-top">
                <div class="banner-icon">
                    <div class="col-xs-10 col-xs-offset-2">
                        <a href=""><img src="img/logo.png" class="img-responsive" alt="logo"/></a>
                    </div>
                    <div class="clear" style="clear: both"></div>
                </div>

            </div>
            <div class="col-xs-6 col-top">
                <form action="#" method="GET" class="form-inline">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button type="submit" class="col-form-search btn glycolor">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                        <input type="text" name="keyword" class="form-control col-form-input"/>
                    </div>
                </form>
            </div>
            <div class="col-xs-3 col-top ">
                <div class="banner-icon">
                    <div class="col-xs-10 col-xs-offset-2  text-center">
                        <a href=""><img src="img/mes.png" alt="" class="img-responsive"/></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--banner结束-->
    <ion-content>
        <!--slider开始-->
        <div class="slide">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/slider1.jpg" alt=""/></div>
                    <div class="swiper-slide"><img src="img/slider2.jpg" alt=""/></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--slider结束-->

        <!--navigation开始-->
        <div class="nav">
            <div class="nav-item">
                <a href="">
                    <ul>
                        <li><img src="img/nav1.png" class="img-responsive center-block" alt="nav1"/></li>
                        <li>商城首页</li>
                    </ul>
                </a>
            </div>
            <div class="nav-item">
                <a href="">
                    <ul>
                        <li><img src="img/nav2.png" alt="nav2"/></li>
                        <li>限时秒杀</li>
                    </ul>
                </a>
            </div>
            <div class="nav-item">
                <a href="">
                    <ul>
                        <li><img src="img/nav3.png" alt="nav3"/></li>
                        <li>拍卖区</li>
                    </ul>
                </a>
            </div>
            <div class="nav-item">
                <a href="#/tab/index/category">
                    <ul>
                        <li><img src="img/nav4.png" alt="nav4"/></li>
                        <li>拼团专区</li>
                    </ul>
                </a>
            </div>
            <div class="nav-item">
                <a href="">
                    <ul>
                        <li><img src="img/nav5.png" alt="nav5"/></li>
                        <li>隆重招商</li>
                    </ul>
                </a>
            </div>
            <div class="clear"></div>
        </div>
        <!--navigation结束-->
        <!--flash sale开始-->
        <div class="divider">
            <div class="col-xs-4">
                <hr/>
            </div>
            <div class="col-xs-4 d-title">
                <div>
                    <img src="img/flash1.png" alt="flash"/>秒杀区
                </div>
            </div>
            <div class="col-xs-4">
                <hr/>
            </div>
            <div class="clear"></div>
        </div>
        <div class="flash-main" style="width: 100%">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="col-xs-4">
                            <a href="" class="flash-img"><img src="img/flashImg1.jpg" class="img-responsive"
                                                              alt="flashImg"/></a>
                        </div>
                        <div class="col-xs-8">
                            <h3 class="text-left"><a href="">BARROCO 新款钟表节拍器</a></h3>

                            <p class="price text-left ">
                                ￥188
                                <small><s>210.00</s></small>
                                <a href=""><img src="img/flash2.png" class="img-responsive img-rounded" alt=""/></a>
                            </p>
                            <div class="count-down text-left">
                                倒计时:
                                <span><b>0</b></span>
                                <span><b>5</b></span>
                                :
                                <span><b>3</b></span>
                                <span><b>2</b></span>
                                :
                                <span><b>1</b></span>
                                <span><b>2</b></span>
                                <span class="overplus text-right">剩余<b>10</b>件</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="col-xs-4">
                            <a href="" class="flash-img"><img src="img/flashImg2.jpg" class="img-responsive"
                                                              alt="flashImg"/></a>
                        </div>
                        <div class="col-xs-8">
                            <h3 class="text-left"><a href="">拜厄钢琴基础教程</a></h3>

                            <p class="price text-left ">
                                ￥18
                                <small><s>24.00</s></small>
                                <a href=""><img src="img/flash2.png" class="img-responsive img-rounded" alt=""/></a>
                            </p>
                            <div class="count-down text-left">
                                倒计时:
                                <span><b>0</b></span>
                                <span><b>5</b></span>
                                :
                                <span><b>3</b></span>
                                <span><b>2</b></span>
                                :
                                <span><b>1</b></span>
                                <span><b>2</b></span>
                                <span class="overplus text-right">剩余<b>5</b>件</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--flash sale结束-->

        <!--group buying开始-->
        <div class="divider">
            <div class="col-xs-4">
                <hr/>
            </div>
            <div class="col-xs-4 d-title">
                <div>
                    <img src="img/flash3.png" alt="flash"/>拼团区
                </div>
            </div>
            <div class="col-xs-4">
                <hr/>
            </div>
            <div class="clear"></div>
        </div>
        <div class="category">

            <section ng-repeat="product in products">
                <div class="header">
                    <div class="col-xs-6">
                        <div class="row">
                            <div class="col-xs-3 col-xs-offset-1 c-logo">
                                <img ng-src="{{product.icon}}" class="img-responsive" alt="piano"/>
                            </div>
                            <div class="col-xs-6 c-title">{{product.title}}</div>
                        </div>
                    </div>
                    <div class="col-xs-6 more text-right">更多&gt;</div>
                    <div class="clear"></div>
                </div>
                <div class="main">
                    <div class="col-xs-4" ng-repeat="item in product.content">
                        <a href="" style="cursor: pointer">
                            <figure>
                                <img ng-src="{{item.picSrc}}" alt="" class="img-responsive"/>

                                <p class="name text-center">{{item.name}}</p>

                                <p class="price text-center">￥{{item.price}}</p>
                            </figure>
                        </a>
                    </div>
                    <div class="clear"></div>
                </div>
            </section>
        </div>
        <!--group buying结束-->
    </ion-content>
</div>



